/**
 * 设备上报
 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Row, Col, Form, Progress } from 'antd';
import { deviceReportShow, realStatus } from '../../services/device';
import { isSuccess } from '../../configs/error';

const styles = {
  rowStyle: {
    paddingTop: '15px'
  },
  colStyle: {
    border: '1px solid #cccccc',
    padding: '0px',
    marginBottom: '20px',
    marginRight: '15px'
  },
  tt: {
    backgroundColor: '#3a94d2',
    padding: '4px 8px',
  },
  ht: {
    display: 'inline-block',
    color: 'white',
  },
  it: {
    padding: '60px 4px',
    textAlign: 'center'
  },
  pro: {
    textAlign: 'center',
    boxSizing: 'border-box',
    padding: '10px'
  },
  lie: {
    textAlign: 'center',
    boxSizing: 'border-box',
    padding: '59px 4px',
  }
};

const columns = [
  {
    title: '室外PM2.5',
    dataIndex: 'pm25',
    isReal: true
  },
  {
    title: '温度',
    dataIndex: 'tmp',
    isReal: true
  },
  {
    title: '空气质量',
    dataIndex: 'qlty',
    isReal: true
  },
  {
    title: '湿度',
    dataIndex: 'hum',
    isReal: true
  }
];

class RealTimeStatus extends Component {
  state = {
    reals: [],
    reports: [],
  }
  componentWillMount() {
    const { device: { detailData: { sno } } } = this.props;
    // const res = Promise.all([realStatus(sno), deviceReportShow(sno)]);
    // res.then(v=>{
    //   console.log(v);
    //   if(isSuccess(v[0]) && isSuccess(v[1])){
    //     this.setState({ reals: v[0].data, reports: columns.concat(v[1].data) })
    //   }
    // })
    const res = Promise.all([deviceReportShow(sno)]);
    res.then(v => {
      if (isSuccess(v[0])) {
        this.setState({ reals: [], reports: v[0].data })
      }
    })
  }

  render() {
    const { device: { detailData } } = this.props;
    const { reports, reals } = this.state;
    return (
      <div>
        <Form>
          <Row style={styles.rowStyle}>
            {
              reports.map((v, i) => {
                if (v.isReal) {
                  return (
                    <Col span={7} style={styles.colStyle} key={`rep${i}`}>
                      <div style={styles.tt}>
                        <h3 style={styles.ht}>{v.title}</h3>
                      </div>
                      <div style={styles.it}><span>{reals[v.dataIndex] || '---'}</span></div>
                    </Col>
                  );
                } else {
                  const keys = Object.keys(v.jsonObject);
                  const value = v.jsonObject[keys[0]];
                  let max = 100;
                  if (v.showType === 2 || v.showType === 3) {
                    const parse = v.range ? JSON.parse(v.range) : { max: '100' };
                    max = parseInt(parse.max);
                  }
                  const pst = ((parseInt(value) / max) * 100).toFixed(0);
                  return (
                    <Col span={7} style={styles.colStyle} key={`rep${i}`}>
                      <div style={styles.tt}>
                        <h3 style={styles.ht}>{keys[0]}</h3>
                      </div>
                      {v.showType === 1 ? ( // 文本
                        <div style={styles.it}><span>{value || '---'}</span></div>
                      ) : null}
                      {v.showType === 2 ? ( // 环状
                        <div style={styles.pro}><Progress type="circle" percent={pst} width={118} /></div>
                      ) : null}
                      {v.showType === 3 ? ( // 条状
                        <div style={styles.lie}><Progress percent={pst} /></div>
                      ) : null}
                    </Col>
                  );
                }
              })
            }
          </Row>
        </Form>
      </div>
    );
  }

}


export default connect(({ device }) => ({ device }))(Form.create({})(RealTimeStatus));
